<template>
    <div>
        <Header/>
        <div class="planting">
            <el-carousel :interval="4000" arrow="always">
                <el-carousel-item v-for="item in dataimg" :key="item.id">
                <div class="ou_img" :style='{backgroundImage: "url("+item.url+")"}'></div>
                <!-- <img :src="item.url" > -->
                
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="backorg">
          <list/>
            <div class="personal">
              <div class="con flexzy">
                <div class="cenc">
                  <div class="cencimg"><img src="@/assets/img/47587a8cc755dcf4024e14e6b325ff5.png" alt=""><div class="sotxt">免费体验</div></div>
                  <div class="cencimg"><img src="@/assets/img/f6a2f42dc0068924ad93f4a7b3b921c.png" alt=""><div class="sotxt">免费体验</div></div>
                </div>
                <div class="cenl">
                  <div class="cencimg"><img src="@/assets/img/2d49d4816186fbb2738e8e32c01cf2a.png" alt=""></div>
                  <div class="sotxt">免费体验</div>
                </div>
                <div class="cenc">
                  <div class="cencimg"><img src="@/assets/img/33938ef92e31a010522f983982069e4.png" alt=""><div class="sotxt">免费体验</div></div>
                  <div class="cencimg"><img src="@/assets/img/4c24c4b10b72e189bd564afd250c33c.png" alt=""><div class="sotxt">免费体验</div></div>
                </div>
                <div class="cenr">
                  <div class="yonhudata" v-if="shox">
                    <div class="contop">
                      <div class="cenimg">
                        <img src="@/assets/img/1c31f4d2ff21be61208877f8c3c4aa2.png" alt="">
                      </div>
                      <div class="hymc">
                        <div class="tata dafaafaf">会员昵称</div> 
                        <div class="tata dafaafaf"><img src="@/assets/img/hg.png" alt=""> 一级会员</div>
                      </div>
                    </div>
                    <div class="conbonn">
                      <div class="column">
                        <div>
                          <div class="tata">积分新增</div>
                          <div class="tata"><span>60</span> 分</div>
                        </div>
                        <div>
                          <div class="tata">申请成功新增</div>
                          <div class="tata"><span>360</span> 个</div>
                        </div>
                      
                        <div>
                          <div class="tata">中奖新增</div>
                          <div class="tata"><span>30</span> 个</div>
                        </div>
                        <div>
                          <div class="tata">待填写报告</div>
                          <div class="tata"><span>3</span> 份</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="yonhudata" v-if="!shox">
                    <div style="padding-top:35px"><img src="@/assets/logof.png" alt=""></div>
                    <div>
                      <el-button style="width:100px" @click="$router.push('/register')" type="danger" round>注册</el-button>
                      <el-button style="width:100px" @click="$router.push('/SignIn')" type="danger" round>登录</el-button>
                    </div>
                  </div>

                  <div class="yonhuzhidao">
                    <div class="cencimg"><img src="@/assets/img/45937dbc8898d85ece8cb351ab9b0de.png" alt=""></div>
                    <div class="cencimg"><img src="@/assets/img/7218283b95fdc69571851ec90b380b9.png" alt=""></div>
                  </div>
                </div>
              </div>
            </div>  
            <div class="biaoti">
                <div class="w507">
                    <div><router-link to="/">免费体验</router-link></div>
                    <div><router-link to="/index1">价格竞猜</router-link></div>
                    <div><router-link to="/index2">新品预定</router-link></div>
                </div>
                <div class="w690">
                  <div class="zhijiao"></div>
                </div>
            </div>
            <div class="shangpinglist">
              <div class="shangpingimg"><img src="@/assets/img/a1.png" alt=""></div>
              <div class="wdlisocn">
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <router-link to="/details23"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
                  <div class="listtxt">
                    <div class="lss">
                      <router-link to="/details23"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓 </h4></router-link>
                      <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                      <p>已申请：1562人</p>
                      <p>活动时间：2019.11.4-2019.11.9</p>
                      <div class="flexzy adww">
                        <div><img src="@/assets/img/a2.png" alt=""></div>
                         <router-link to="/details23"><div class="mianfshqin">免费申请</div></router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- <div class="ceshi" @click="getHelpCentre">测试</div> --> 
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import list from '@/components/list'
export default {
    components: { 
        Header,
        Footer,
        list
    },
    data() {
      return {
        shox:false,
        dataimg:[
          {url:require('../assets/sdvsgwegwwwr.jpg'),id:'1'},
          {url:require('../assets/06b2a29a699c710144ea81108ceb3d1.jpg'),id:'2'},
          {url:require('../assets/84ba14abada9b09314511b9060c4d04.jpg'),id:'3'},
          {url:require('../assets/0e905a9e6985dcee6101a2a3451b19c.jpg'),id:'4'}
        ]
      }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      
    },
    // 测试 
  //   async getHelpCentre (){
  //   let res = await helpCentre({
  //     data:{
  //       id:1
  //     }
  //   })
  //   console.log(res)
  // }
  }

}
</script>
<style scoped lang="stylus">
.el-carousel__item h3 {
  color :#475669;
  font-size :18px;
  opacity :0.75;
  line-height : 300px;
  margin :0;
}
.planting >>>.el-carousel__container {
  height 480px
}
.planting >>> .el-carousel__indicators--horizontal {
  bottom 20px
}
.el-carousel__item:nth-child(2n) {
  background-color #99a9bf
}
.planting >>> .el-carousel__item img{
  width 1920px
  height 480px
}
.el-carousel__item:nth-child(2n+1) {
  background-color #d3dce6
} 
.planting {
  z-index -1
}
.backorg {
  background-color #f06048
}
.biaoti
  width 1200px
  height 62px
  margin 35px auto
  display flex
  justify-content space-between
  .w507
    width 507px
    border-top 1px solid #fff
    cursor pointer
    text-align center
    line-height 62px
    display flex
    justify-content space-between
    div 
      width 168px
      color #dcdcdc  
      font-size 30px  
  .w690
    width 690px
    border-bottom 1px solid #fff
    .zhijiao
      width 0px
      height 0px
      border-color #fff transparent
      border-width 0px 30px 61px 00px
      border-style solid
#adcole 
  color #fff
  background-color #6d1717
  border-bottom 4px solid #5b7fde
.shangpinglist
  width 1200px
  margin -40px auto   
  background-color #eee
  padding-bottom 55px
  .shangpingimg
    margin-bottom 12px
  .wdlisocn
      display: flex
      flex-wrap wrap
      align-content space-between
  .list 
    height 354px
    width 283px
    margin 8px
.listimg
  width 283px
  height 224px
.listtxt
  width 247px
  height 160px
  background-color #ffffff
  box-shadow 0px 3px 9px 0px rgba(65, 65, 65, 0.17)
  position relative
  z-index 1
  top -37px
  left 17px
  .lss
    width 217px
    height 130px
    margin 0 auto
    h4 
      font-family SourceHanSansCN-Regular
      font-size 15px
      color #313131
      padding-top 12px
      padding-bottom 5px
    p 
      font-size 12px
      color #959595
      line-height 18px
.flexzy 
  display flex
  justify-content space-between 
.mianfshqin  
  color #f06048
  font-size 16px
  text-align center
  border 1px solid #f06048
  border-radius 14px
  width 134px
  line-height 28px
.mianfshqin:hover
  background-color #f06048
  color #fff
  cursor pointer
.adww
  margin-top 12px  
.adww img 
  padding-top 4px  
.personal{
  width: 1200px;
	height: 362px;
	background-color: #ffffff;
  margin: 0 auto;
}
.personal .con {
  width:1180px;
  margin: 0 auto;
}
.personal .con .cenl{
  width:380px;
  height: 342px;
  margin-top: 10px;
}
.cenl .sotxt {
  width: 179px;
	line-height:38px;
	background-color: #f06048;
	border-radius: 19px;
  font-family: SourceHanSansCN-Regular;
	font-size: 24px;
	color: #ffffff;
  text-align: center;
  position: relative;
  top: -60px;
  left: 105px;
}
.cenc .sotxt {
    line-height: 28px;
    background-color: #f06048;
    border-radius: 19px;
    font-family: SourceHanSansCN-Regular;
    font-size: 17px;
    color: #fff;
    text-align: center;
    position: relative;
    top: -60px;
    left: 21px;
    width: 125px;
    height: 28px;
}
.personal .con .cenl img{
  width:380px;
  height: 342px;
}
.personal .con .cenc{

  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.personal .con .cenc .cencimg{
	width: 166px;
	height: 166px;
}
.personal .con .cenc .cencimg img{
	width: 166px;
	height: 166px;
}
.personal .con .cenr{
  width:415px;
  height: 342px;
  margin-top: 10px;
  border: solid 1px #eeeeee;
}
.yonhudata {
  height 160px
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.contop {
  width: 220px;
  margin-top: 20px;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.contop .cenimg img{
  width: 74px;
	height: 74px;
  border-radius: 50%
}
.contop .hymc img{
	width: 22px;
	height: 19px;
}
.contop .hymc {
	font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #1f1e1e;
  line-height: 37px
}
.conbonn {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.conbonn .column{
  width: 380px;
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
.column span{
  font-family: Arial-BoldMT;
	font-size: 16px;
	font-weight: 700;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #f06048;
}
.yonhuzhidao{
  display: flex;
  justify-content: space-between;
}
.yonhuzhidao div{
	width: 202px;
	height: 130px;
  margin-top: 52px
}
.yonhuzhidao div>img{
	width: 202px;
	height: 130px;
}
.tata {
  font-family: SourceHanSansCN-Regular;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #1f1e1e;
  text-align:center;
}
.w507 div:hover {
  color #fff
  background-color #6d1717
  border-bottom 4px solid #5b7fde
}
.w507 .router-link-exact-active {
  color #fff
  background-color #6d1717
  border-bottom 4px solid #5b7fde
}
.w507 a {
  width 168px
  font-size 30px
  height 56px
  display inline-block
}
.dafaafaf {
  font-size 20px
}
.cencimg {
  transition: all .8s;
}
.cencimg img:hover {
  transform:scale(1.02);
}
.ou_img {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 1070px;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
}
</style>